import Common from "../Common";

const {ccclass, property} = cc._decorator;

@ccclass
export default class Diagram extends Common {


    @property(cc.Node)
    headerNode: cc.Node

    @property(cc.Node)
    contentNode: cc.Node

    @property(cc.Node)
    footerNode: cc.Node

    @property(cc.Node)
    backBtn: cc.Node


    protected item1: cc.Node
    protected item21: cc.Node
    protected item22: cc.Node
    protected item31: cc.Node
    protected item32: cc.Node
    protected item33: cc.Node
    protected item34: cc.Node

    protected items: cc.Node[] = []

    start() {
        this.initItemNode()
    }

    initItemNode() {

        this.item1 = this.headerNode.getChildByName('item')


        this.item21 = this.contentNode.getChildByName('item1')
        this.item22 = this.contentNode.getChildByName('item2')

        this.item31 = this.footerNode.getChildByName('item1')
        this.item32 = this.footerNode.getChildByName('item2')
        this.item33 = this.footerNode.getChildByName('item3')
        this.item34 = this.footerNode.getChildByName('item4')

        this.items.push(this.item1)
        this.items.push(this.item21)
        this.items.push(this.item22)
        this.items.push(this.item31)
        this.items.push(this.item32)
        this.items.push(this.item33)
        this.items.push(this.item34)
        this.initEmitter()
        this.drawLine()

    }

    onItemClick(e) {
        this.onBtnClick()
        const itemNode: cc.Node = e.target
        const color = itemNode.color
        itemNode.color = cc.Color.fromHEX(cc.color(), '#68BEFF');
        this.scheduleOnce(() => {
            itemNode.color = color
        }, 0.1)
    }

    protected initEmitter() {
        this.backBtn.on(cc.Node.EventType.TOUCH_START, () => {
            this.onBtnClick()
            cc.director.loadScene('profile')
        }, this) // 点击返回首页按钮
        this.items.forEach(item => {
            item.on(cc.Node.EventType.TOUCH_START, this.onItemClick, this)
        })
    }

    protected drawLine() {
        const lineNode = this.item1.getChildByName('line')
        const linePos = cc.v2(lineNode.x, lineNode.y - this.item1.height / 2);
        const line = lineNode.getComponent(cc.Graphics)
        this.drawNodeLine(line, linePos, this.getNodePosByNode(lineNode, this.item21))
        this.drawNodeLine(line, linePos, this.getNodePosByNode(lineNode, this.item22))

        const linePos21 = this.getNodePosByNode(lineNode, this.item21, false);

        this.drawNodeLine(line, linePos21, this.getNodePosByNode(lineNode, this.item31))
        this.drawNodeLine(line, linePos21, this.getNodePosByNode(lineNode, this.item32))

        const linePos22 = this.getNodePosByNode(lineNode, this.item22, false);
        this.drawNodeLine(line, linePos22, this.getNodePosByNode(lineNode, this.item33))
        this.drawNodeLine(line, linePos22, this.getNodePosByNode(lineNode, this.item34))
    }

    protected drawNodeLine(line: cc.Graphics, startPos: cc.Vec2, endPos: cc.Vec2) {
        line.moveTo(startPos.x, startPos.y)
        const centerPos = cc.v2(
            (startPos.x + endPos.x) / 2,
            (startPos.y + endPos.y) / 2,
        )
        line.quadraticCurveTo(endPos.x, centerPos.y, endPos.x, endPos.y)
        line.stroke();
        // this.drawTriangle(line, endPos, 15)
    }

    protected drawTriangle(line: cc.Graphics, startPos: cc.Vec2, height: number) {
        line.moveTo(startPos.x, startPos.y)
        line.lineTo(startPos.x - height, startPos.y + height)
        // line.lineTo(startPos.x, startPos.y + 3 * height / 4)
        line.lineTo(startPos.x + height, startPos.y + height)
        line.lineTo(startPos.x, startPos.y)
        line.fill();

    }

    protected getNodePosByNode(targetNode: cc.Node, posNode: cc.Node, getTopPos = true) {
        const pos = cc.v2(posNode.x, getTopPos ? posNode.y + posNode.height / 2 : posNode.y - posNode.height / 2)
        return targetNode.convertToNodeSpaceAR(posNode.parent.convertToWorldSpaceAR(pos))
    }


}
